<template>
  <van-cell-group inset class="card_item_page">
    <van-row class="card_item_centent">
      <div @click="onClick">
        <van-col span="6">
          <van-image
            width="2rem"
            height="2rem"
            :src="imageUrl"
          />
        </van-col>
        <van-col span="12" class="card_item_middle">
          <van-row class="card_item_title">{{ activeTitle }}</van-row>
          <van-row class="card_item_date">开始时间：{{ activeStartDate }}</van-row>
          <van-row class="card_item_date">结束时间：{{ activeEndDate }}</van-row>
        </van-col>
      </div>
      <van-col span="6" class="card_item_state">
        <div v-if="!isEditor">{{ activeState + "." }}</div>
        <div v-else>
          <div v-if="activeState==='进行中'">
            <van-button type="primary" size="mini"
                        v-clipboard:copy="url"
                        v-clipboard:success="firstCopySuccess"
                        v-clipboard:error="firstCopyError"
            >复制链接</van-button>
          </div>
          <div v-else>
            {{ activeState + "." }}
          </div>
        </div>
      </van-col>
    </van-row>
  </van-cell-group>
</template>

<script>
import {Col, Row, CellGroup, Button, Dialog, Toast} from "vant"
import {Image as VanImage} from "vant"

export default {
  name: "CardItem",
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    VanImage,
    Toast,
    Dialog
  },
  data(){
    return {
      url:"http://192.168.201.56:8080/main/home?key=" + this.id
    }
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    imageUrl: {
      type: String,
      default: "https://img01.yzcdn.cn/vant/cat.jpeg"
    },
    activeState: {
      type: String,
      default: "进行中"
    },
    activeTitle: {
      type: String,
      default: "幸运大抽奖"
    },
    activeStartDate: {
      type: String,
      default: "2021-12-10"
    },
    activeEndDate: {
      type: String,
      default: "2021-12-20"
    },
    isEditor: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      if (this.activeState === "审核中") {
        Dialog({message: "当前活动审核中"});
      } else if (this.activeState === "已结束") {
        Dialog({message: "当前活动已结束"});
      } else {
        this.$router.push({name: 'home', query: {key: this.id}})
      }
    },
    firstCopySuccess(e){
      Toast.success("复制成功")
    },
    firstCopyError(e){

    }
  }
}
</script>

<style scoped>
.card_item_page {
  margin-top: 10px;
}

.card_item_centent {
  margin: 10px;
  height: 75px;
}

.card_item_middle {
  padding-top: 10px;
}

.card_item_title {
  font-size: 14px;
  font-weight: 700;
}

.card_item_date {
  font-size: 14px;
}

.card_item_state {
  font-size: 16px;
  height: 75px;
  color: red;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
</style>
